import React from 'react'
import {DataTable} from 'primereact/datatable'
import {Column} from 'primereact/column'
import {Button} from 'primereact/button'
import {Dialog} from 'primereact/dialog'

import VoteSelected from './dlog/voteSelectDlog'
import VoteUnSelected from './dlog/voteUnSelectDlog'

class VoteData extends React.Component{
  constructor(){
    super()

    this.state={
      assets:[
        {token: '1', country: '2', vote:'3'},
        {token: '1', country: '2', vote:'3'},
        {token: '1', country: '2', vote:'3'},
        {token: '1', country: '2', vote:'3'},
        {token: '1', country: '2', vote:'3'},
        {token: '1', country: '2', vote:'3'},
      ]
    }
  }

  render(){
    return (
      <DataTable value={this.state.assets}>
        <Column field="token" header="Token" />
        <Column field="country" header="区域" />
        <Column field="vote" header="投票" />
      </DataTable>
    )
  }
}

class VoteManager extends React.Component{
  constructor(){
    super()

    this.state={
      progress:'32%',
      delegate:225.00,
      voteCounts:'3/22.5',
      voteSelected:11,
      voteSelectVisible:false,
      voteUnSelectVisible:false
    }
  }

  render(){
    return (
      <div className="p-g">
        <div className="p-g-4">
          <div style={{textAlign:'center',borderRight:'1px solid #999'}}>
            <p>进度</p>
            <p>{this.state.progress}</p>
          </div>
        </div>
        <div className="p-g-4">
          <div style={{textAlign:'center',borderRight:'1px solid #999'}}>
            <p>已抵押</p>
            <p>{this.state.delegate.toFixed(3)}</p>
          </div>
        </div>
        <div className="p-g-4">
          <div style={{textAlign:'center'}}>
            <p>票数</p>
            <p>{this.state.voteCounts}</p>
          </div>
        </div>

        <div className="p-g-12">
          <VoteData />
        </div>

        <div className="p-g-12">
          <div className="p-g-8"></div>
          <div className="p-g-2" style={{textAlign:'center'}}>
            已选：{this.state.voteSelected}
          </div>
          <div className="p-g-2"></div>
        </div>

        <div className="p-g-12">
          <div className="p-g-2"></div>
          <div className="p-g-2" style={{textAlign:'center'}}>
            <Dialog
              id='trade'
              visible={this.state.voteSelectVisible} 
              width="700px" 
              modal={true} 
              onHide={(e) => this.setState({voteSelectVisible: false})}
            >
              <VoteSelected />
            </Dialog>
            <Button label='我要投票' 
            className="p-button-success" 
            onClick={(e) => this.setState({voteSelectVisible: true})} />
          </div>
          <div className="p-g-4"></div>
          <div className="p-g-2" style={{textAlign:'center'}}>
            <Dialog
              id='trade'
              visible={this.state.voteUnSelectVisible} 
              width="700px" 
              modal={true} 
              onHide={(e) => this.setState({voteUnSelectVisible: false})}
            >
              <VoteUnSelected />
            </Dialog>
            <Button label='取消投票' 
            className="p-button-danger" 
            onClick={(e) => this.setState({voteUnSelectVisible: true})} />
          </div>
          <div className="p-g-2"></div>
        </div>
      </div>
    )
  }
}

export default VoteManager